<template>
  <div class='bd-position-container'>
    <div class="table-header">
      <el-form :model="requestParam"
               class="search-form">
        <el-row>
          <el-col :span="10"
                  :offset="10"
                  aligh="right"
                  class="search-param">
            <el-form-item prop="gps_num">
              <el-input v-model="requestParam.gps_num"
                        placeholder="请输入设备编号"></el-input>
            </el-form-item>
            <el-form-item prop="status">
              <el-select v-model="requestParam.status"
                         placeholder="请选择状态">
                <el-option v-for="(item, index) in gpsStatusCodeList"
                           :key="index"
                           :label="item.name"
                           :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4"
                  class="flex-end">
            <el-button type="primary"
                       @click="getBdPositionList">查询</el-button>
            <el-button @click="editPosition('create',{})"
                       type="primary">添加</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="equipment-list-container">
      <el-table :highlight-current-row='true'
                :header-cell-style="{background:'#f5f5f5'}"
                class="equipment-list-table"
                :data='equipmenListData.data'
                border>
        <el-table-column prop='gps_num'
                         label='设备编号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='model'
                         label='设备型号'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='created_at'
                         label='创建时间'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='project_name'
                         label='在用项目'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop='status_name'
                         label='当前状态'
                         align='center'
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label='操作'
                         align='center'
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button @click="editPosition('edit',scope.row)"
                       type="text">修改</el-button>
            <el-button type="text"
                       v-if="scope.row.status==='3'"
                       @click="enableConfirm(scope.row)">启用</el-button>
            <el-button type="text"
                       v-if="scope.row.status==='1' || scope.row.status==='2'"
                       @click="forbidConfirm(scope.row)">禁用</el-button>
            <el-button @click="showPositionRecord(scope.row)"
                       type="text">定位记录</el-button>
            <el-button @click="showBidRecord(scope.row)"
                       type="text">使用记录</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change='handlePageChange'
                     :current-page='requestParam.page'
                     :page-size='requestParam.per_page'
                     :page-sizes="[15,20,30,40,50,100]"
                     layout='total,sizes,prev, pager, next, jumper'
                     background
                     :total='equipmenListData.total'
                     align='center'>
      </el-pagination>
    </div>
    <!-- 编辑北斗定位弹框 -->
    <EditPositionDialog @callback="editCallback"
                        :dialogVisible.sync="editPositionDialogVisible"
                        :dialogStatus="editPositionDialogStatus"
                        :dialogForm="editPositionDialogData">
    </EditPositionDialog>
    <!-- 定位列表弹框 -->
    <PositionRecordDialog :positionRecordDialogVisible.sync="positionRecordDialogVisible"
                          :positionGpsId="positionGpsId">
    </PositionRecordDialog>
    <BidRecordDialog :bidGpsId="bidGpsId"
                     :bidRecordDialogVisible.sync="bidRecordDialogVisible"></BidRecordDialog>
  </div>
</template>
<script>
import EditPositionDialog from './components/EditPositionDialog'
import PositionRecordDialog from '../EquipmentManage/PositionRecordDialog'
import BidRecordDialog from '../EquipmentManage/BidRecordDialog'
import { BdPositionApi } from '@/services/EquipmentManage'
import { standardCodeApi } from '@/services/StandardCode'
export default {
  data () {
    return {
      requestParam: {
        gps_num: '',
        status: '',
        page: 1,
        per_page: 15
      },
      equipmenListData: {
        data: [

        ],
        total: 0,
        per_page: 15
      },
      // 新增或修改北斗定位弹框是否可见
      editPositionDialogVisible: false,
      // 新增或修改状态
      editPositionDialogStatus: 'edit',
      // 新增或修改北斗定位弹框数据对象
      editPositionDialogData: {},
      // 定位记录或使用记录弹框是否显示
      positionRecordDialogVisible: false,
      bidRecordDialogVisible: false,
      // 显示定位记录或使用记录
      recordListDialogType: 'positionRecord',
      // 定位记录或使用记录数据
      recordListDialogData: {},
      // 北斗定位状态标准码列表
      gpsStatusCodeList: [],
      // 选中的gps_id
      positionGpsId: 0,
      bidGpsId: 0
    }
  },
  components: {
    EditPositionDialog,
    PositionRecordDialog,
    BidRecordDialog
  },
  methods: {
    // 分页功能
    handlePageChange (page) {
      this.requestParam.page = page
      this.getBdPositionList()
    },
    // 新增或编辑北斗定位
    editPosition (status, row) {
      this.editPositionDialogVisible = true
      this.editPositionDialogStatus = status
      this.editPositionDialogData = row
    },
    // 展示使用记录
    showBidRecord (row) {
      this.bidGpsId = row.gps_id
      this.bidRecordDialogVisible = true
    },
    // 展示定位列表弹框
    showPositionRecord (row) {
      this.positionGpsId = row.gps_id
      this.positionRecordDialogVisible = true
    },
    // 编辑成功回调函数
    editCallback (data) {
      //console.log(data)
      this.getBdPositionList()
    },
    // 获取北斗定位列表
    getBdPositionList () {
      BdPositionApi.getGpsList({
        params: this.requestParam
      }).then(res => {
        //console.log(res, 'get gps list')
        if (res.code === 0) {
          this.equipmenListData = res.data
          this.equipmenListData.data.map((item) => {
            item.status_name = this.getGpsStatusName(item.status)
          })
        }
      }, err => {
        console.log(err)
      })
    },
    // 获取北斗定位状态标准码
    getGpsStatusCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'gpsStatus'
        }
      }).then(res => {
        //console.log(res, 'get sensor type')
        if (res.code === 0) {
          this.gpsStatusCodeList = res.data.list;
          this.gpsStatusCodeList.unshift({ name: '全部', value: '' });
          window.localStorage.setItem('gpsStatusCodeList', JSON.stringify(this.gpsStatusCodeList))
        }
      })
    },
    // 根据北斗定位状态value获取name
    getGpsStatusName (value) {
      let name = ''
      this.gpsStatusCodeList.map((item) => {
        if (item.value === value) name = item.name
      })
      return name
    },
    // 禁用设备
    forbidConfirm (row) {
      if (row.status === '2') {
        this.$message.error('设备已绑定，无法禁用')
      } else if (row.status === '3') {
        this.$message.error('设备已禁用')
      } else {
        this.$confirm('是否禁用该设备？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.forbid(row.gps_id)
        }).catch(() => {

        })
      }
    },
    forbid (id) {
      BdPositionApi.forbidGps({
        data: {
          gps_id: id
        }
      }).then(res => {
        // console.log(res, 'forbid')
        if (res.code === 0) {
          this.$message.success('禁用成功')
          this.getBdPositionList()
        }
      })
    }
  },
  async created () {
    await this.getGpsStatusCode()
    this.getBdPositionList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.bd-position-container {
  padding: 20px;
  .table-header {
    .search-form {
      .search-param {
        display: flex;
        justify-content: space-between;
        .el-form-item {
          // width: 30%;
        }
      }
    }
  }
  .equipment-list-container {
    .equipment-list-table {
      margin-bottom: 15px;
    }
  }
}
</style>
